<template>
  <div class="center_bottom1">
    <Echart
      ref="echartRef"
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom1"
      :mapJson="mapJson"
      :isResize="false"
    ></Echart>
  </div>
</template>

<script>
import guianArea from "@/utils/map/gy.json";
// import one from "@/assets/imgs/图层 10.png";
// import two from "@/assets/imgs/Group.png";
// import three from "@/assets/imgs/Group 2.png";
var mapDate = [
  {
    name: "息烽县",
    place: '息烽供电局',
    all: 48,
    aValue: 12,
    bValue: 12,
    cValue: 12,
    dValue: 12,
    eValue: 18,
  },
  {
    name: "修文县",
    place: '修文供电局',
    all: 30,
    aValue: 14,
    bValue: 12,
    cValue: 12,
    dValue: 12,
    eValue: 18,
  },
  {
    name: "花溪区",
    place: '花溪供电局',
    all: 60,
    aValue: 15,
    bValue: 11,
    cValue: 18,
    dValue: 19,
    eValue: 18,
  },
];

const dataList = [
  {
    name: '花溪区',
    value: 120
  },
  {
    name: '白云区',
    value: 90
  },
]

export default {
  data() {
    return {
      options: {},
      // mapJson: null,
      mapJson: guianArea,
      autoTooltipTimer: null,
      mouseoutTimer: null,
      currentIndex: 0,
      isPaused: false,
      chartInstance: null,
      initRetryCount: 0, // 初始化重试次数
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    dateType: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    // this.getGeojson();
  },
  mounted() {
    this.initMap()
  },
  beforeDestroy() {
    this.clearAutoTooltip();
    // 清除鼠标离开定时器
    if (this.mouseoutTimer) {
      clearTimeout(this.mouseoutTimer);
      this.mouseoutTimer = null;
    }
    // 移除事件监听器
    if (this.chartInstance) {
      this.chartInstance.off('mouseover');
      this.chartInstance.off('mouseout');
      this.chartInstance.off('datazoom');
      this.chartInstance.off('brush');
      this.chartInstance = null;
    }
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
        this.$nextTick(() => {
          // 更新图表，保留 visualMap 的用户设置
          if (this.$refs.echartRef && this.$refs.echartRef.chart) {
            // 保存当前 visualMap 的 range（如果用户已经拖拽过）
            const currentOption = this.$refs.echartRef.chart.getOption();
            const savedVisualMapRange = currentOption.visualMap && currentOption.visualMap[0] && currentOption.visualMap[0].range;
            
            // 使用合并模式更新，避免丢失 visualMap 的 range
            this.$refs.echartRef.chart.setOption(this.options, false);
            
            // 如果用户已经设置过 range，恢复它
            if (savedVisualMapRange && Array.isArray(savedVisualMapRange) && savedVisualMapRange.length === 2) {
              this.$refs.echartRef.chart.setOption({
                visualMap: [{
                  range: savedVisualMapRange
                }]
              }, true);
            }
          }
          this.resetAutoTooltip();
        });
      },
      deep: true,
    },
    dateType: {
      handler() {
        this.init(this.data);
        this.$nextTick(() => {
          // 更新图表，保留 visualMap 的用户设置
          if (this.$refs.echartRef && this.$refs.echartRef.chart) {
            // 保存当前 visualMap 的 range（如果用户已经拖拽过）
            const currentOption = this.$refs.echartRef.chart.getOption();
            const savedVisualMapRange = currentOption.visualMap && currentOption.visualMap[0] && currentOption.visualMap[0].range;
            
            // 使用合并模式更新，避免丢失 visualMap 的 range
            this.$refs.echartRef.chart.setOption(this.options, false);
            
            // 如果用户已经设置过 range，恢复它
            if (savedVisualMapRange && Array.isArray(savedVisualMapRange) && savedVisualMapRange.length === 2) {
              this.$refs.echartRef.chart.setOption({
                visualMap: [{
                  range: savedVisualMapRange
                }]
              }, true);
            }
          }
          this.resetAutoTooltip();
        });
      },
      deep: true,
    },
  },
  methods: {
    initMap(){
      this.init(this.data);
      this.$nextTick(() => {
        // 确保图表完全渲染后再初始化自动提示
        if (this.$refs.echartRef && this.$refs.echartRef.chart) {
          this.initRetryCount = 0; // 重置重试次数
          // 初始化时使用合并模式，避免覆盖 visualMap 的 range（如果用户已经设置过）
          this.$refs.echartRef.chart.setOption(this.options, false);
          // 使用 requestAnimationFrame 确保在下一帧渲染
          requestAnimationFrame(() => {
            // 延迟一点再初始化自动提示，确保渲染完成
            setTimeout(() => {
              this.initAutoTooltip();
            }, 100);
          });
        } else {
          // 如果图表还没初始化，稍后再试（最多重试5次）
          if (this.initRetryCount < 5) {
            this.initRetryCount++;
            setTimeout(() => {
              this.initMap();
            }, 200);
          } else {
            console.warn('地图初始化失败：图表实例未创建');
          }
        }
      });
    },
    init(newData) {
      // const mapDate = newData
      mapDate.forEach(item =>{
        item.value = item.all || 0; // 确保所有区域都有 value 值
      })
      console.log(mapDate,'mapDate');
      
      // 计算 visualMap 的 min 和 max 值
      const values = mapDate.map(item => item.value || 0);
      const minValue = Math.min(...values, 0);
      const maxValue = Math.max(...values, 0) || 100; // 如果所有值都是0，设置默认最大值
      
      const that = this
      this.options = {
        geo: {
          show: false,
          map: "bd",
          silent: true,
          roam: false,
          z: 0,
          itemStyle: {
            normal: {
              areaColor: "#9ec8fa",
              shadowColor: "#d6e3f7",
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              borderColor: "rgba(0, 0, 0, 0.7)",
              borderWidth: 0.5,
            },
            
          },
        },
        visualMap: {
          show: true,
          type: 'continuous', // 连续型 visualMap
          min: minValue,
          max: maxValue,
          // 初始化范围，默认显示所有数据
          range: [minValue, maxValue],
          right: 12,
          bottom: 12,
          text: ['高', '低'], // 文本，默认为数值文本
          textStyle: {
            color: '#fff' // 设置文本颜色为白色，提高可见性
          },
          calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          realtime: true, // 拖拽时，是否实时更新
          seriesIndex: [0], // 指定 visualMap 应用到哪个系列，修正为索引 0
          // 确保 visualMap 正确映射到地图数据
          precision: 0, // 数值精度，0 表示整数
          // 明确指定 visualMap 控制的视觉元素
          inRange: {
            // 视觉映射到颜色 - 控制 areaColor
            color: ['#fcfeff', '#02a6ee'] // （从浅蓝到深蓝）
          },
          outOfRange: {
            // 超出范围时的视觉样式 - 使用较浅但可见的颜色
            color: '#eeeeee', // 超出范围的颜色（浅灰色，保持可见）
            // 确保超出范围时也有颜色显示，不透明
            opacity: 1
          }
        },
      //   visualMap: {
      //     min: 0,
      //     max: 1000,
      //     left: 26,
      //     bottom: 40,
      //     showLabel: !0,
      //     text: ["高", "低"],
      //     textStyle: {
      //       color: '#fff'
      //     },
      //     pieces: [{
      //         gt: 100,
      //         label: "> 100 人",
      //         color: "#7f1100"
      //     }, {
      //         gte: 10,
      //         lte: 100,
      //         label: "10 - 100 人",
      //         color: "#ff5428"
      //     }, {
      //         gte: 1,
      //         lt: 10,
      //         label: "1 - 9 人",
      //         color: "#ff8c71"
      //     }, {
      //         gt: 0,
      //         lt: 1,
      //         label: "疑似",
      //         color: "#ffd768"
      //     }, {
      //         value: 0,
      //         color: "#ffffff"
      //     }],
      //     show: !0
      // },
        tooltip: {
          trigger: "item",
          confine: true, // 将 tooltip 限制在图表区域内
          enterable: false, // 不允许鼠标进入 tooltip
          position: function (point, params, dom, rect, size) {
            // 确保 tooltip 显示在可视区域内
            const [x, y] = point;
            const viewWidth = size.viewSize[0];
            const viewHeight = size.viewSize[1];
            const boxWidth = size.contentSize[0];
            const boxHeight = size.contentSize[1];
            
            let posX = x + 10;
            let posY = y - 10;
            
            // 如果右侧超出，显示在左侧
            if (posX + boxWidth > viewWidth) {
              posX = x - boxWidth - 10;
            }
            // 如果上方超出，显示在下方
            if (posY - boxHeight < 0) {
              posY = y + 10;
            }
            // 如果左侧超出，显示在右侧
            if (posX < 0) {
              posX = 10;
            }
            // 如果下方超出，显示在上方
            if (posY + boxHeight > viewHeight) {
              posY = viewHeight - boxHeight - 10;
            }
            
            return [posX, posY];
          },
          formatter: function (params) {
            const name = params.data.name;
            const item = mapDate.find(item => item.name === name) || {}
            if (!item.name) {
              return '暂无数据';
            }
            // console.log(item,'data');
            let text = `<div style="font-weight:bold;">----${item.place}----</div>`;
            const dateType = that.dateType;
            const isAll = true;
            if (dateType.includes("作业总数") || isAll) {
              text += `<div style="font-weight:bold;">作业总数: <span style="color:#1890ff;">${item.all}人</span></div>`;
            }
            if (dateType.includes("特高风险") || isAll) {
              text += `<div style="font-weight:bold;">特高风险: <span style="color:#1890ff;">${item.aValue}人</span></div>`;
            }
            if (dateType.includes("高风险") || isAll) {
              text += `<div style="font-weight:bold;">高风险: <span style="color:#1890ff;">${item.bValue}人</span></div>`;
            }
            if (dateType.includes("中风险") || isAll) {
              text += `<div style="font-weight:bold;">中风险: <span style="color:#1890ff;">${item.cValue}人</span></div>`;
            }
            if (dateType.includes("低风险") || isAll) {
              text += `<div style="font-weight:bold;">低风险: <span style="color:#1890ff;">${item.dValue}人</span></div>`;
            }
            if (dateType.includes("可接收风险") || isAll) {
              text += `<div style="font-weight:bold;">可接收风险: <span style="color:#1890ff;">${item.eValue}人</span></div>`;
            }
            return `
              <div style="width:150px;font-weight:bold;margin-bottom:5px;">${item.name}</div>
               ${text}
            `;
          },
        },
        series: [
          {
            type: "map",
            roam: true,
            top: 0,
            z: 1,
            // geoIndex: 0,
            aspectScale: 1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                // formatter: function (params) {
                //   // 每6个字符插入换行符
                //   const name = params.name.replace(/(.{6})/g, "$1\n")
                //   if (mapDate[0] === params.name) {
                //     return `{label|${name}} {one| }`;
                //   }else if (mapDate[1] === params.name) {
                //     return `{label|${name}} {two| }`;
                //   }else if (mapDate[2] === params.name) {
                //     return `{label|${name}} {three| }`;
                //   }else {
                //     return `{label|${name}}`; 
                //   }
                // },
                // rich: {
                //   label: {
                //     verticalAlign: "middle",
                //   },
                //   one: {
                //     height: 30,
                //     width: 30,
                //     backgroundColor: {
                //       image: one, // 图片URL
                //     },
                //   },
                //   two: {
                //     height: 30,
                //     width: 30,
                //     backgroundColor: {
                //       image: two, // 图片URL
                //     },
                //   },
                //   three: {
                //     height: 30,
                //     width: 30,
                //     backgroundColor: {
                //       image: three, // 图片URL
                //     },
                //   },
                // },
              },
              emphasis: {
                disabled: true,
                textStyle: {
                  color: "#fff",
                },
              },
              
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, .8)",
                borderWidth: 1,
                // areaColor 由 visualMap 控制，不要在这里设置
                // visualMap 会自动控制 areaColor
                borderType: 'dashed',
              },
              emphasis: {
                disabled: true,
                // areaColor 由 visualMap 控制
                shadowColor: "#093566",
                shadowBlur: 3,
                shadowOffsetX: 3,
                shadowOffsetY: 3,
              },
            },
            // select: {
            //   disabled: true,
            // },
            // zoom: 1,
            data: mapDate,
            map: "bd",
          },
        ],
      };
    },
    initAutoTooltip() {
      // 获取 echarts 实例
      if (this.$refs.echartRef && this.$refs.echartRef.chart) {
        // 如果已经初始化过，先移除旧的监听器
        if (this.chartInstance) {
          this.chartInstance.off('mouseover');
          this.chartInstance.off('mouseout');
          this.chartInstance.off('datazoom');
          this.chartInstance.off('brush');
        }
        
        this.chartInstance = this.$refs.echartRef.chart;
        
        // 注意：visualMap 拖拽时，ECharts 会自动更新颜色，不需要手动刷新
        // 移除可能导致问题的 setOption 调用，让 ECharts 的 realtime: true 自动处理
        // visualMap 的 realtime: true 已经能够实时更新颜色，额外的 setOption 可能会干扰
        
        // 判断是否真正移入了地图数据区域
        const isMapDataArea = (params) => {
          if (!params) return false;
          // 必须满足：
          // 1. 是 map 类型
          // 2. 有组件类型标识（componentType === 'series'）
          // 3. 有数据索引（dataIndex !== undefined）或者有名称且有数据对象（params.data 或 params.value）
          // 4. seriesIndex 为 0（第一个系列）
          const hasDataIndex = params.dataIndex !== undefined && params.dataIndex !== null;
          const hasNameAndData = params.name && (params.data || params.value !== undefined);
          
          return params.seriesType === 'map' 
            && params.componentType === 'series'
            && (hasDataIndex || hasNameAndData)
            && params.seriesIndex === 0;
        };
        
        // 监听鼠标进入事件，只在鼠标移入地图数据区域时才暂停自动展示
        this.chartInstance.on('mouseover', (params) => {
          // 只有真正移入地图数据区域时才处理
          if (isMapDataArea(params)) {
            this.isPaused = true;
            this.clearAutoTooltip();
            // 清除鼠标离开的延迟定时器
            if (this.mouseoutTimer) {
              clearTimeout(this.mouseoutTimer);
              this.mouseoutTimer = null;
            }
            
            // 显示当前鼠标悬停的 tooltip
            if (params.dataIndex !== undefined) {
              this.chartInstance.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: params.dataIndex,
              });
            } else if (params.name) {
              this.chartInstance.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                name: params.name,
              });
            }
          }
          // 如果移入空白区域，不处理，继续轮播
        });
        
        // 监听鼠标离开事件，只在离开地图数据区域时才恢复自动展示
        this.chartInstance.on('mouseout', (params) => {
          // 只有真正离开地图数据区域时才处理
          if (isMapDataArea(params)) {
            this.isPaused = false;
            // 清除之前的鼠标离开定时器
            if (this.mouseoutTimer) {
              clearTimeout(this.mouseoutTimer);
              this.mouseoutTimer = null;
            }
            
            // 清除自动展示定时器
            this.clearAutoTooltip();
            
            // 延迟隐藏 tooltip 并开始自动展示，避免闪烁
            this.mouseoutTimer = setTimeout(() => {
              if (!this.isPaused && this.chartInstance) {
                // 先隐藏当前 tooltip
                this.chartInstance.dispatchAction({
                  type: 'hideTip',
                });
                
                // 再延迟一点开始自动展示，确保平滑过渡
                setTimeout(() => {
                  if (!this.isPaused && this.chartInstance) {
                    this.startAutoTooltip();
                  }
                }, 500);
              }
              this.mouseoutTimer = null;
            }, 1500);
          }
          // 如果离开空白区域，不处理，继续轮播
        });
        
        // 开始自动展示
        this.startAutoTooltip();
      }
    },
    resetAutoTooltip() {
      this.currentIndex = 0;
      this.clearAutoTooltip();
      if (this.chartInstance && !this.isPaused) {
        this.startAutoTooltip();
      }
    },
    startAutoTooltip() {
      if (this.isPaused || !this.chartInstance || mapDate.length === 0) {
        return;
      }
      
      this.clearAutoTooltip();
      
      // 找到当前数据在地图数据中的索引
      const currentDataItem = mapDate[this.currentIndex];
      if (!currentDataItem) {
        this.currentIndex = 0;
        return;
      }
      
      // 获取图表数据，找到对应的 dataIndex
      const option = this.chartInstance.getOption();
      const seriesData = option.series && option.series[0] && option.series[0].data;
      
      // 查找对应的 dataIndex
      let dataIndex = -1;
      if (seriesData && seriesData.length > 0) {
        dataIndex = seriesData.findIndex(item => item.name === currentDataItem.name);
      }
      
      // 如果找不到对应的 dataIndex，尝试使用名称
      if (dataIndex === -1) {
        // 显示 tooltip（使用名称）
        this.chartInstance.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          name: currentDataItem.name,
        });
      } else {
        // 显示 tooltip（使用 dataIndex，更准确）
        this.chartInstance.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: dataIndex,
        });
      }
      
      // 切换到下一个
      this.currentIndex = (this.currentIndex + 1) % mapDate.length;
      
      // 设置定时器，5秒后切换到下一个
      this.autoTooltipTimer = setTimeout(() => {
        this.startAutoTooltip();
      }, 5000);
    },
    clearAutoTooltip() {
      if (this.autoTooltipTimer) {
        clearTimeout(this.autoTooltipTimer);
        this.autoTooltipTimer = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom1 {
  width: 100%;
  height: 100%;

  .echarts_bottom1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
